<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html><!--<![endif]-->
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="initial-scale=1,minimum-scale=1" />
	<title>个人设置</title>
    <c:import url="${appRoot}/public/head-tag.jsp"/>
    <style>
        /* 必需 */
	    .textarea{
	    	width:50%;
	    	height:130px;
	    }
	    .textarea-edit{
	    	width: 100%;
	    }
	    .xiuxiu-upload-container,div.xiuxiu-upload{
			width:160px;
			height:160px;
		}
		.row-label-content{
    		width:100px
    	}
		.text-100{
    		width:200px;
    	}
    	
    	.text-150{
    		width:150px;
    	}
    	
    	.row-content-container{
    		padding-left:20px;
    	}
    	
    	
    	.form-row-container{
    		/*border: dashed #014CB6 1px;*/
    		margin-top: 60px;
    		width: 60%;
    		
    		display: block;
		    padding: 1rem;
		    margin: 1rem 0;
		    background-color: #f8f8f8;
		    border: 1px solid #dedede;
		    border-radius: 0;
    	}
    	.form-row-img{
    	  max-width: 100px;
    	  max-height: 100px; 
    	  /*border-radius: 50%;*/
    	}
    </style>
</head>
<body>
	
    <c:import url="${appRoot}/public/header.jsp"/>
    
    <section class="container">
    	
	    <c:set var="sidebar" scope="request" value="system"/>
	    <c:set var="navbar" scope="request" value="setting"/>
	    <c:import url="${appRoot}/public/sidebar.jsp"/>
		
    	<div class="content" id="app">
    		<div class="content-top">
                <h3 class="content-title">
                    <div class="bread">
                    	<span>个人设置</span>
                    </div>
                </h3>
    		</div>
    		<div class="content-main">
    			<div class="block-content">
                     <div class="form-block" >
     			        <form id="form1" action="null" data-form="one" method="post" goback=" action="/Manager/web/sysuser/listSearch">
                              <div class="form-row">
								<span class="row-label">头&nbsp;&nbsp;像:</span>
								<div class="row-content">
									<div  xx-upload class="xiuxiu-upload-container">
										<textarea type="config" style="display:none;" v-text="getImageConfig(program.avatar) | json"></textarea>
									</div>
									<p class="value-note">图片规格：160x160</p>
								</div>
							</div>
                             <div class="form-row">
                                 <input name="id" type="hidden" v-model="program.id">	
                                 <span class="row-label">昵&nbsp;&nbsp;称：</span>
                                 <div class="row-content">
                                     <input name="nick" type="text" class="text text-150" v-model="program.nick" iname="昵称" itip="昵称"/>
                                 </div>
                             </div>
				        	
				        	<div class="form-row">
                                 <span class="row-label">邮&nbsp;&nbsp;箱：</span>
                                 <div class="row-content">
                                 	<div class="row-value">
                                 		<span v-text="program.email"></span>
                             		</div>
                                 </div>
                             </div>
				        	
				        	
                             <div class="form-row">
                                 <span class="row-label">后台账号：</span>
                                 <div class="row-content">
                                 	<div class="row-value">
                                 		<p  v-text="program.name"></p>
                                 	</div>
                                 </div>
                             </div>
                          	<div class="form-row">
                                 <span class="row-label">后台角色：</span>
                                 <div class="row-content">
                                 	<div class="row-value">
                                 		<p  v-text="program.oper"></p>
                                 	</div>
                                 </div>
                             </div>
                             <div class="form-row">
                                 <span class="row-label">密&nbsp;&nbsp;码：</span>
                                 <div class="row-content">
                                 	<div class="row-value">
                                 		<input type="hidden" name="password" v-model="program.password" />
		                            	<a href="javascript:;" @click="updatepw" class="action-link">修改密码</a>
		                            </div>
                                 </div>
                             </div>
                             <div class="form-row">
                                 <p class="row-label">关联账号：</p>
                                 <div class="row-content">
									
 		                            <div class="row-value">
 		                            
 		                            	<template v-if="!program.puid">
	                                        <label>未关联</label>
	                                        <a @click="getRelation"  href="javascript:;" class="action-link">关联账号</a>
	                                        <input type="hidden" irequired="true" v-model="program.puid"  name="puid"/>
	 		                            </template>
	 		                            <template v-else>
											<span id="relationName">已关联</span>
											<a @click="getRelation"  href="javascript:;" class="action-link">更改关联</a>
	                                        <input type="hidden" irequired="true" v-model="program.puid"  name="puid"/>
											<p>
											<a href="javascript:" id="showaction"  data-action="show" class="action-link">显示关联信息</a>
		                                 	<a href="javascript:" id="editaction"  data-action="edit" class="action-link">编辑关联信息</a>
											</p>
	 		                            </template>
                                 	</div>
                             	</div>
                             </div>
                     </form>
                     <div class="form-row form-row-btn">
                         <button class="btn btn-default btn-large" @click="save()" >保存</button>
                     </div>
                </div>
    		</div>
    	</div>
    </section>
    
    <script type="text/template" id="item/relate/show" note="关联信息显示">
	    	<div class="form-row">
				<span class="row-label">头&nbsp;&nbsp;像:</span>
				<div class="row-content">
					<div class="row-value">
						<img class="form-row-img" src="http://pic.jgrm.net/{{portrait}}_xm"/>
					</div>
				</div>
			</div>
	         <div class="form-row">
	             <span class="row-label">用户名：</span>
	             <div class="row-content">
		             <div class="row-value">
		                 <p >{{username}}</p>
		             </div>
	             </div>
	         </div>
	         <div class="form-row">
	             <span class="row-label">手&nbsp;&nbsp;机：</span>
	             <div class="row-content">
		             <div class="row-value">
		                 <p>{{if phone}}{{phone}}{{else}}暂无{{/if}}</p>
		             </div>
	             </div>
	         </div>
	         <div class="form-row">
	             <span class="row-label">性&nbsp;&nbsp;别：</span>
	             <div class="row-content">
		             <div class="row-value">
		             		<p>{{if gender==1}}男{{/if}} {{if gender==2}}女{{/if}}</p>
		             </div>
	             </div>
	         </div>
	      	<div class="form-row">
				<span class="row-label">个人签名：</span>
				<div class="row-content">
					<div class="row-value">
						<span style="padding-left: 10px;">{{if label}}{{label}}{{else}}这个家伙很懒，什么也没有留下{{/if}}</span>
					</div>
				</div>
			</div>
	</script>
    
    <script type="text/template" id="item/relate/show/edit" note="编辑关联信息">
    	<form id="formEdit">
    		<div class="form-row">
				<span class="row-label">头&nbsp;&nbsp;像:</span>
				<div class="row-content">
					<div  xx-upload class="xiuxiu-upload-container">
						<textarea type="config" style="display:none;">
							{
								name:"image",
								checker:{
									iname:'头像',
									itip:'请上传头像'
								},
								value:'{{portrait}}'
							}
						</textarea>
					</div>
					<p class="value-note">图片规格：160x160</p>
				</div>
			</div>
	         <div class="form-row">
	             <span class="row-label">用户名：</span>
	             <div class="row-content">
	              <input name="nicename" type="text" class="text text-100" iname="昵称" itip="昵称" value={{username}} >
	             </div>
	         </div>
	         <div class="form-row">
	             <span class="row-label">手&nbsp;&nbsp;机：</span>
	             <div class="row-content">
	                 <input name="phone" type="text" class="text text-100" ipattern="^.{1,20}$" iname="手机" itip="手机" value={{phone}}>
	             </div>
	         </div>
	         <div class="form-row">
	             <span class="row-label">性&nbsp;&nbsp;别：</span>
	             <div class="row-content">
	             	<div class="row-value">
	             		<input type="radio" id="limit-0" name="gender" value="1" {{if gender==1}}  checked="checked" {{/if}}/>
	                    <label for="limit-0">男</label>&nbsp;&nbsp;&nbsp;
	                    <input type="radio" id="limit-1" name="gender" value="2" {{if gender==2}}  checked="checked" {{/if}}/>
	                    <label for="limit-1">女</label>
	                </div>
	             </div>
	         </div>
	      	<div class="form-row">
				<span class="row-label">个人签名：</span>
				<div class="row-content">
					<textarea name="label" class="text textarea-edit" iname="个人签名">{{label}}</textarea>
				</div>
			</div>
		</form>
	</script>
    
    
     <script type="text/template" id="item/update" note="密码修改">
		<form  method="post">
            <div class="form-row">
                <span class="row-label row-label-content" >旧密码：</span>
            	<div class="row-content row-content-container">
                    <input type="password" class="text text-100" name="source"  placeholder="输入旧密码"  itip="旧密码" iname="旧密码"/>
            	</div>
        	</div>
            <div class="form-row">
                <span class="row-label row-label-content" >新密码：</span>
                <div class="row-content row-content-container">
                    <input type="password" class="text text-100" name="target"   placeholder="输入新密码"  itip="新密码" iname="新密码"/>
                </div>
            </div>
            <div class="form-row">
                <span class="row-label row-label-content">新密码：</span>
                <div class="row-content row-content-container">
                    <input type="password" class="text text-100" name="target2"  placeholder="再次输入新密码" irequired="true" itip="再次输入新密码"  iname="再次输入新密码"/>
                </div>
            </div>
		</form>
    </script>
    
    <script type="text/template" id="item/relate/change" title="关联账号">
    	<form   action="null" method="post">
            <div class="form-row">
                <p class="value-note" style="margin-left: -70px;">验证APP账号以完成账号关联, 如无APP账户请先下载APP注册</p>
        	</div>
            <div class="form-row">
                <span class="row-label row-label-content" >账号：</span>
                <div class="row-content row-content-container">
                    <input type="text" class="text text-100" name="name" placeholder="关联账号手机号" iname="关联账号" itip='关联账号' irequired="true" />
                </div>
            </div>
            <div class="form-row">
                <span class="row-label row-label-content">密码：</span>
                <div class="row-content row-content-container">
                    <input type="password" class="text text-100" name="password" iname="关联密码" placeholder="关联密码" itip='关联密码' irequired="true" />
                </div>
            </div>
		</form>
    </script>
    
    
   <script src="/pages/assets/js/require.all.js"></script>
   <script type="text/javascript">
        requirejs([
            'vue',
            'artTemplate', 
            'artDialog',  
            'vender.modal',
            
            'vender.actions',
            'utils.search', 
            'vender.xxupload',
            
            'jquery.formcheck', 
            'jquery.ajaxsubmit',
            'jquery.common'
        ], 
        function(Vue, template, dialog, Modal, Action, Search, XXUpload){
    		
            var relateUid;
            Action.extend({
				'form.relate':'/Manager/web/user/updateSave?id={data}',
				'form.password':'/Manager/web/sysuser/updatepwd?oldPwd={oldPwd}&newPwd={newPwd}',
            	'form.init':'/Manager/web/sysuser/myselfinfo',
				'form.save':'/Manager/web/sysuser/myselfinfo/save',
            	'plinkDetail' : '/Manager/web/zbpt/userdetail/show?uid={data}',
            	'form.list':'/Manager/web/user/listSearch'
            })
            var App={
            	alert : function(tip, type){
                       	return Modal.alert.apply(this, [tip, null, type]);
                    },
                tip:function(msg,type){
                	return Modal.tip(msg,type)
                },
                getList:function(){
                	var dtd = $.Deferred();
                    var action=Action.get('form.list');
                    $.getJSON(action).success(function(res){
                    	dtd.resolve(res.data.list);
                    }).fail(function(e){
                    	dtd.reject('null');
                    });
                    return dtd;
                },
                getUid:function(data){
					var dtd = $.Deferred();
					var tmpUid;
	            	App.getList().then(function(res){
	            		$.each(res, function(index,value) {
	            			if(res[index].phone==data){
	            				tmpUid=res[index].uid;
	            				dtd.resolve(tmpUid);
	            			}
	            		});
	            	})
                	return dtd;
                },
                getPlinkDetail:function(){
                    var action2 = Action.get('plinkDetail',relateUid);
                    $.getJSON(action2).success(function(res){
                    	var aa="已关联"+res.data.phone;
                    	$("#relationName").html(aa)
                    }).fail(function(e){
                    	app.tip("关联失败",Modal.MsgType.ERROR);
                    });
                },
                
                getFormData :function(){
                    var dtd = $.Deferred();
                    var action = Action.get('form.init');
                    $.getJSON(action)
                    .success(function(result){
						relateUid=result.data.puid;
                        
	                    dtd.resolve(result.data);
                    }).fail(function(e){
                    	app.tip("关联失败",Modal.MsgType.ERROR);
                    	dtd.reject('null')	;
                    });
                    
                    return dtd;
                },
                editRelate:function(data){
                	var id="item/relate/show/edit";
    				var title="修改关联账号信息";
    				var content=template(id,data);
					var idialog=dialog({
						id : id,
						title:title,
						width:500,
						content:content,
						onshow:function(){
							var el=this.getContent().find("[xx-upload]");
							XXUpload(el,{size:'160:160'})
                        },
						button:[
							{
								id:"cancel",value:"取消"
							},
							{
								id:"ok",value:"提交修改",
								autofocus:true,
								callback:function(){
									var $form=this.getContent().find("form");
									var params=$.deParam($form.serialize());
		        					actionURL=Action.get('form.relate',relateUid);
									$form.checkForm({
									onSuccess:function(){
	                                    $.post(actionURL,params,function(result){
	                                    	var code=result.code;
	                                    	if(code==200){
		                                    	App.tip("修改成功",Modal.MsgType.SUCCESS)
	                                    	}else{
	                                    		var msg=result.msg || "修改失败！";
												App.tip(msg,Modal.MsgType.ERROR);
	                                    	}
	                                    }).fail(function(e){
	                                    	App.tip("修改失败",Modal.MsgType.ERROR);
	                                    });
	                                    idialog.close();
			                        },
		                            onFail:function(e){
		                                alert(e);
		                                e.target.focus();
		                            }
								})
								return false;
							}
							}
						]
					})
					.showModal();
                },
                showRelateMsg:function(data){
                    var id="item/relate/show";
    				var title="关联信息显示";
    				var content=template(id,data);
					var idialog=dialog({
						id : id,
						title:title,
						content:content,
						button:[
							{
								id:"cancel",value:"关闭"
							}
						]
					})
					.showModal();
                },
                initForm:function(formData){
                    var app = this;
                    
                    var vueApp = new Vue({
                        el:'#app',
                        data :function(){
                        	return {
                        		program :formData,
                        	}
                        },
                        methods:{
                        	getImageConfig:function(value){
    							return {
									name:'avatar',
									checker:{
										iname:'头像',
										itip:'请上传头像'
									},
									value:value
								}
    						},
                            save:function(){
                                var that = this;
								var $form1 = $('form[data-form=one]');
                                var actionURL=Action.get('form.save',vueApp.program.id);
								
								$form1.checkForm({
									onSuccess:function(){
	                                    var params= $form1.serialize();
	                                    $.post(actionURL,$.deParam(params),function(result){
		                                    var code=result.code;
		                                	if(code==200){
		                                    	app.tip("修改成功",Modal.MsgType.SUCCESS);
		                                	}else{
		                                		var msg=result.msg || "提交失败！";
												app.tip(msg,Modal.MsgType.ERROR);
		                                	}
		                                })
		                                .fail(function(e){
		                                	app.alert(e.msg)
		                                });
			                        },
		                            onFail:function(e){
		                                alert(e);
		                                e.target.focus();
		                            }
								
								})
								
                            },
                            updatepw:function(data){
		        				var id="item/update";
		   	    				var title="密码修改";
		   	    				var content=template(id,data);
		   						var idialog=dialog({
		   							id : id,
		   							title:title,
		   							content:content,
		   							button:[
		   								{
		   									id:"cancel",value:"取消"
		   								},
		   								{
		   									id:"ok",value:"提交修改",
		   									autofocus:true,
		   									callback:function(){
		   										var $form=this.getContent().find("form");
		   										var params=$.deParam($form.serialize());
		   										if(params.target!=params.target2){
		   				        					app.alert("两次输入新密码不一样，请重新输入");
		   				        				}else{
		   				        					$form.checkForm({
			   				        					onSuccess:function(){
						                                    var data={
			   				        							"oldPwd":params.source,
			   				        							"newPwd":params.target
			   				        						}
			   				        						var actionURL=Action.get("form.password",data);
				   		                                    $.post(actionURL,data,function(result){
				   		                                    	var code=result.code;
				   		                                    	if(code==200){
					   		                                    	app.tip("修改成功",Modal.MsgType.SUCCESS);
				   		                                    	}else{
				   		                                    		var msg=result.msg || "提交失败！";
																	app.tip(msg,Modal.MsgType.ERROR);
				   		                                    	}
				   		                                    }).fail(function(e){
				   		                                    	app.tip("操作失败",Modal.MsgType.ERROR);
				   		                                    });
				   		                                 idialog.close();
								                        },
							                            onFail:function(e){
							                                alert(e);
							                                e.target.focus();
							                            }
		   				        					})
	   				        					}
		   										return false;
		   									}
		   								}
		   							]
		   						})
		   						idialog.showModal();
		        			},
			                getRelation:function(){
    						    var id="item/relate/change";
		   	    				var title="更改关联账号";
		   	    				var content=template(id);
		   						var idialog=dialog({
		   							id : id,
		   							title:title,
		   							content:content,
		   							button:[
		   								{
		   									id:"cancel",value:"取消"
		   								},
		   								{
		   									id:"ok",value:"确认关联",
		   									autofocus:true,
		   									callback:function(){
		   										var $form=this.getContent().find("form");
		   										var params=$.deParam($form.serialize());
		   										
		   										$form.checkForm({
		   				        					onSuccess:function(){
					                                    var action=Action.get("form.save");
		   				        						var mydata={
		   				        							"puid":params.name,
		   				        							"password":params.password
		   				        						};
		   				        						App.getUid(mydata.puid).then(function(data){
		   				        							mydata.puid=data;
			   				        						$.post(action,mydata,function(result){
			   				        							var code=result.code;
					   		                                    	if(code==200){
						   		                                    	app.tip("修改成功",Modal.MsgType.SUCCESS);
													                    	var aa="已关联"+params.name;
													                    	$("#relationName").html(aa);
													                    	vueApp.program.puid=mydata.puid;
							   		                                    	relateUid=mydata.puid;
							   		                                    	vueApp.program.password=params.password;
					   		                                    	}else{
					   		                                    		var msg=result.msg || "提交失败！";
																		app.tip(msg,Modal.MsgType.ERROR);
					   		                                    	}
			   				        						})
			   				        						.fail(function(){
			   				        							var msg=result.msg || "提交失败！";
																app.tip(msg,Modal.MsgType.ERROR);
			   				        						})
		   				        						});
	   		                                    	idialog.close();
							                        },
						                            onFail:function(e){
						                                alert(e);
						                                e.target.focus();
						                            }
	   				        					})
		   										return false;
		   									}
		   								}
		   							]
		   						})
		   						idialog.showModal();
		        			},
    						},
                    })
                },
	    		initListeners:function(){
	    		
					$('body').on('click', '[data-action]', function(e){
						var $this=$(this);
						var action=$this.data("action");
						if(action=="edit"){
							var action = Action.get('plinkDetail',relateUid);
		                    $.getJSON(action)
		                    .success(function(result){
		                        App.editRelate(result.data);
		                    }).fail(function(e){
	                        	app.tip("关联失败",Modal.MsgType.ERROR);
	                        });
						}
						if(action=="show"){

							var action = Action.get('plinkDetail',relateUid);
		                    $.getJSON(action)
		                    .success(function(result){
		                    	App.showRelateMsg(result.data);
		                    }).fail(function(e){
	                        	app.tip("关联失败",Modal.MsgType.ERROR);
	                        });
						}
						return false;
					})
				},
                init : function(){
                    var app = this;
                    app.getFormData()
                    .then(function(data){
                        app.initForm(data);
                        app.getPlinkDetail();
                        XXUpload('[xx-upload]',{size:'160:160'});
                        app.initListeners();
                    })
                    .fail(function(e){
                    	app.alert(e)
                    })
                }
            }
            App.init();
        })
   </script>
    </body>
</html>